<template>
	<div class="banner">
		<!-- 已登录 -->
		<template v-if="hasOnline">
			<main>
				<div class="loginout">
					<img src="../../../assets/img/loginout.png" @click="outlogin()">
				</div>
				<div class="userinfo-login">
					<div class="left">
						<img src="../../../assets/img/user.png" >
					</div>
					<div class="right">
						<section>
							<h4>ykx_564654446</h4>
							<img src="../../../assets/img/xiugai.png" >
						</section>
						<section class="user-quanxian">
							<aside class="user-lv">1.普陀山</aside>
							<aside><img src="../../../assets/img/30341584437057.png" >普通会员</aside>
						</section>
					</div>
				</div>
			</main>
		</template>
		<!-- 未登录 -->
		<template v-else>
			<div class="userinfo">
				<div class="left">
					<img src="../../../assets/img/user.png" >
				</div>
				<div class="right" @click="tologin()">
					<h4>去登录/注册</h4>
					<img src="../../../assets/img/user_xiaojiantou.png" >
					<p>新用户注册送388元大礼包</p>
				</div>
			</div>
		</template>
		<!-- vip会员区域 -->
		<div class="vip">
			<div class="join-card">
				<span class="lefttps">未获得</span>
				<img src="../../../assets/img/1614671448870.png" >
				<div class="viptxt">
					<p style="font-size: 0.35rem;">游侠风户外会员</p>
					<p>全站200+户外线路免费畅玩</p>
				</div>
				<button type="button">
					立即开通
					<i class="iconfont icon-jiantouyou"></i>
				</button>
			</div>
		</div>
	</div>
</template>

<script>
import Cookies from 'js-cookie';
import {mapGetters} from 'vuex';

export default{
	name:'Banner',
	data(){
		return {
			
		}
	},
	computed:{
		...mapGetters(['hasOnline'])
	},
	methods:{
		//跳转登录页
		tologin(){
			this.$router.push({path:'/login',query:{jump:'user'}});
		},
		//退出登录
		outlogin(){
			//设为未在线状态
			localStorage.Online = false;
			Cookies.remove('phone');
			this.$store.commit('outlogin');
		}
	}
}
</script>

<style scoped>
.banner{
	width: 100%;
	height: 100%;
	/* background-color: #FF8684; */
}
.banner{
	width: 100%;
	height: 4.4rem;
	background-image: url(../../../assets/img/user_bg.png);
	background-size: 100% 100%;
}
.banner .userinfo,
.banner .userinfo-login{
	width: 80%;
	display: flex;
	margin: 0 auto;
	padding-top: 1rem;
	/* background-color: #FF7F50; */
}
.banner .userinfo-login{
	padding-bottom: 0.3rem;
}
.banner .userinfo .left,
.banner .userinfo-login .left{
	width: 20%;
}
.banner .userinfo .left img,
.banner .userinfo-login .left img{
	width: 100%;
	border-radius: 50%;
}
.banner .userinfo .right{
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: 0.5rem;
	margin-top: 0.45rem;
}
.banner .userinfo-login .right{
	width: 60%;
}
.banner .userinfo-login .right .user-quanxian{
	width: 90%;
	margin: 0.2rem auto 0;
	height: 0.35rem;
}
.banner .userinfo-login .right .user-quanxian aside:last-child{
	width: 1.8rem;
	padding-right: 0.2rem;
	text-align: right;
	border-radius: 0.3rem;
	margin-left: 0.5rem;
	line-height: 0.5rem;
	background-color: #fff2b3;
}
.banner .userinfo-login .right .user-quanxian aside:last-child img{
	width: 0.4rem;
	left: 2.25rem;
}
.banner .userinfo-login .right .user-lv::before{
	display: inline-block;
	content: '';
	height: 0.3rem;
	margin-top: 0.05rem;
	width: 0.4rem;
	background-image: url(../../../assets/img/lv.png);
	background-size: 100% 100%;
}
.banner .userinfo-login .right .user-lv{
	width: 2rem;
	height: 0.45rem;
	text-indent: 0.25rem;
	color: #d8ab78;
	background-image: url(../../../assets/img/img14.b88d60eb.png);
	background-repeat: no-repeat;
	background-size: 1rem 0.4rem;
	background-color: #000000;
	border-radius: 0.2rem;
}
.banner .loginout{
	position: absolute;
	width: 100%;
	text-align: right;
}
.banner .loginout img{
	width: 0.45rem;
	margin: 0.2rem 0.3rem 0 0;
}
.banner .userinfo-login .right section{
	width: 100%;
	display: flex;
	align-items: center;
	position: relative;
}
.banner .userinfo-login .right section h4{
	display: inline-block;
	margin-left: 0.2rem;
	font-size: 0.55rem;
	height: 0.65rem;
	line-height: 0.6rem;
	font-weight: bold;
	width: 80%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.banner .userinfo-login .right section img{
	right: 0;
	top: 0;
	position: absolute;
	margin-left: 0.3rem;
	width: 0.5rem;
}
.banner .userinfo .right h4{
	font-size: 0.55rem;
	font-weight: bold;
	margin-bottom: 0.2rem;
}
.banner .userinfo .right img{
	width: 0.4rem;
	margin-left: 0.5rem;
	transform: rotate(175deg) translateY(-0.1rem);
	z-index: 10;
}
.banner .userinfo .right p{
	z-index: 11;
	font-weight: bold;
	padding: 0.2rem 0.4rem;
	border-radius: 1rem;
	color: white;
	background: linear-gradient(60deg,#ff6302,#ffa22b);
}
.banner .vip{
	width: 100%;
	margin-top: 0.2rem;
}
.banner .vip .join-card{
	position: relative;
	width: 90%;
	height: 1.7rem;
	overflow: hidden;
	margin: 0 auto;
	background-image: url(../../../assets/img/vip-card-bg.png);
	background-size: 100% 100%;
}
.banner .vip .join-card .lefttps{
	position: absolute;
	left: 0;
	top: 0;
	color: #5d5d5d;
	border-radius: 0.2rem 0 0.2rem 0;
	padding: 0.1rem 0.2rem;
	background-color: #c2c2c2;
}
.banner .vip .join-card img{
	width: 20%;
	margin: 5% 0 0 6%;
}
.banner .vip .join-card .viptxt{
	position: absolute;
	left: 30%;
	top: 25%;
	font-size: 0.3rem;
}
.banner .vip .join-card .viptxt p{
	line-height: 0.5rem;
	color: #fef69e;
}
.banner .vip .join-card button{
	border: 0;
	position: absolute;
	top: 0.3rem;
	right: 0.3rem;
	padding: 0.05rem 0.1rem 0.05rem 0.2rem;
	font-size: 0.25rem;
	border-radius: 0.3rem;
	background-color: #ffe797;
}
</style>
